<template>
  <ElTreeSelect v-model="value" check-strictly :load="load" lazy >
    <template #label="{value}">{{ value }}</template>
  </ElTreeSelect>
</template>
<script setup lang="ts">
  import { getDeclareNode, getSeed } from '@/views/seed-dev';
  import { ElTreeSelect, LoadFunction } from 'element-plus';
  import type Node from 'element-plus/es/components/tree/src/model/node'
  import { computed, ref, watch } from 'vue';

  const props = defineProps<{seedName: string, modelValue?: string}>()
  const emits = defineEmits(['update:modelValue'])

  const seed = computed(() => getSeed(props.seedName))
  function load(node: Node, resolve): LoadFunction {
    if(node.level === 0) return resolve(getDeclareNode(seed.value))
    if(!node.data.seedName) return resolve([])

    return resolve(getDeclareNode(getSeed(node.data.seedName), node.data.value))
  }

  const value = ref(props.modelValue)

  watch([() => props.seedName, () => props.modelValue], () => value.value = props.modelValue)
  watch(() => value.value, (val) => emits('update:modelValue', val))
</script>